import {NavBar, Popup} from 'antd-mobile'
import CommentFooter from '../CommentFooter'
import NoComment from '../NoComment'
import styles from './index.module.scss'
import CommentItem from "@/pages/Article/components/CommentItem";
import http from "@/utils/http";
import {useEffect, useState} from "react";
import CommentInput from "@/pages/Article/components/CommentInput";
import {useBoolean} from "ahooks";
import {updateCommentCount} from "@/store/actions/article";
import {useDispatch} from "react-redux";

export default function CommentReply({onCommentReplyHide, commentReplyData = {}, onThumbsUp, art_id}) {
  // originComment存储的是当前评论项的数据
  const [originComment, setOriginComment] = useState(commentReplyData);
  const {com_id, is_liking, like_count} = originComment
  const [commentReply, setCommentReply] = useState({})
  const [inputVisible, {setTrue, setFalse}] = useBoolean(false)
  const dispatch = useDispatch()
  useEffect(() => {
    http.get('/comments', {
      params: {
        type: 'c', // 标识获取的评论的类型
        source: com_id
      }
    }).then(res => {
      setCommentReply(res.data)
    })
  }, [com_id])

  // 实现点赞功能
  const onOriginThumbsUp = () => {
    onThumbsUp(com_id, is_liking) // 提交接口，点赞的数据写入redux
    const likeCount = is_liking ? -1 : 1
    setOriginComment({
      ...originComment,
      is_liking: !is_liking,
      like_count: like_count + likeCount
    })
  }
  const onAddComment = async value => {
    //  提交接口
    // 由于回复弹层组件目前没有art_id数据，
    // 所以处理方式：从父组件把art_id传递下来
    const res = await http.post('/comments', {
      target: com_id,
      content: value,
      art_id,
    })
    setCommentReply({
      ...commentReply,
      total_count: commentReply.total_count + 1, //回复的总数自增1
      results: [
        res.data.new_obj,
        ...commentReply.results,
      ]
    })
    setFalse()
    dispatch(updateCommentCount({id: com_id, total: commentReply.total_count + 1}))
    setOriginComment({
      ...originComment,
      reply_count: commentReply.total_count + 1
    })
  }
  //
  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        {/* 顶部导航栏 */}
        <NavBar
          className="transparent-navbar"
          onBack={onCommentReplyHide}
        >
          <div>{0}条回复</div>
        </NavBar>

        {/* 原评论信息 */}
        <div className="origin-comment">
          <CommentItem onThumbsUp={onOriginThumbsUp} {...originComment}/>
        </div>
        {/* 回复评论的列表 */}
        <div className="reply-list">
          <div className="reply-header">全部回复</div>
          {
            commentReply.total_count > 0 ? (
                commentReply.results.map(item => (
                  <CommentItem key={item.com_id} {...item} type={'reply'}/>
                ))
              ) :
              <NoComment/>
          }

        </div>

        {/* 评论工具栏，设置 type="reply" 不显示评论和点赞按钮 */}
        <CommentFooter showCommentPopup={setTrue}/>
      </div>

      <Popup
        visible={inputVisible}
        position={'bottom'}
        className={'reply-popup'}
        onMaskClick={setFalse}
      >
        <CommentInput onAddComment={onAddComment} onClose={setFalse}/>
      </Popup>
    </div>
  )
}
